<template>
  <div>
    <nav-bar :defineNavBar="defineNavBar"></nav-bar>
    <div>

      <div class="aco">
        <div class="aco-1">
            <uni-row class="aco-2">
              <uni-col :span="7" :offset="1">
                發行:
              </uni-col>
              <uni-col :span="10">
                210,000,000
              </uni-col>
            </uni-row>
        </div>
      </div>

      <div class="aco">
        <div class="aco-1">
          <uni-row class="aco-2">
            <uni-col :span="7" :offset="1">
              鑄造池:
            </uni-col>
            <uni-col :span="10">
              210,000,000
            </uni-col>
          </uni-row>
        </div>
      </div>

      <div class="aco">
        <div class="aco-1">
          <uni-row class="aco-2">
            <uni-col :span="7" :offset="1">
              分紅池:
            </uni-col>
            <uni-col :span="10">
              210,000,000
            </uni-col>
          </uni-row>
        </div>
      </div>

      <div class="aco">
        <div class="aco-1">
          <uni-row class="aco-2">
            <uni-col :span="7" :offset="1">
              獎勵池:
            </uni-col>
            <uni-col :span="10">
              210,000,000
            </uni-col>
          </uni-row>
        </div>
      </div>

      <div class="aco">
        <div class="aco-1">
          <uni-row class="aco-2">
            <uni-col :span="7" :offset="1">
              技術:
            </uni-col>
            <uni-col :span="10">
              210,000,000
            </uni-col>
          </uni-row>
        </div>
      </div>

      <div class="aco">
        <div class="aco-1">
          <uni-row class="aco-2">
            <uni-col :span="7" :offset="1">
              黑洞銷毁:
            </uni-col>
            <uni-col :span="10">
              210,000,000
            </uni-col>
          </uni-row>
        </div>
      </div>
    </div>

    <div class="aco-5">
      <uni-row class="aco-6">
        <uni-col :span="2" :offset="1">
          <img class="aco-6-1" src="../../static/6/3.png" alt="">
        </uni-col>
        <uni-col :span="10" class="aco-6-2">
          價格走勢:
        </uni-col>
      </uni-row>
<!--      <canvas canvas-id="ss" id="ss" class="charts"  />-->
    </div>


  </div>
</template>

<script setup>
import navBar from "../../component/navBar.vue";
import uCharts from "@qiun/ucharts"
import demodata from '../../mock/demodata.json';

var uChartsInstance = {};
import { ref, onMounted } from "vue"
let cWidth = ref(750)
let cHeight = ref(500)
onMounted(() => {
  cWidth.value = uni.upx2px(750);
  cHeight.value = uni.upx2px(500);
  getServerData();
})
function getServerData() {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      categories: ["1天", "2天", "3天", "4天", "5天"],
      series: [{
        data: [0.1, 0.25, 0.3, 0.25, 0.4]
      }
      ]
    };
    drawCharts('ss', res);
  }, 500);
}

function drawCharts(id, data) {
  const ctx = uni.createCanvasContext(id, this);
  uChartsInstance[id] = new uCharts({
    type: "line",
    context: ctx,
    width: cWidth.value,
    height: cHeight.value,
    categories: data.categories,
    series: data.series,
    animation: true,
    background: "#212145",
    color: ["#463D97"],
    padding: [5, 5, 5, 5],
    dataLabel: false,
    xAxis: {
      disabled: false, //是否不显示x轴线 包括名称
      disableGrid: true, //是否不加中间分割线，
    },
    yAxis: {
      disabled: false, //是否不显示y轴线刻度
      disableGrid: false, //是否不显示刻度分割线
      data: [{
        min: 0 //数据开始显示的最小值
      }]
    },
    legend: {
      show: false,
      position: "right",
      lineHeight: 25
    },
    extra: {
      line: {
        type: "curve",
        width: 1,
        activeType: "hollow"
      }
    }
  });
}

</script>

<style scoped>
.aco-6-2{
  color: #FFFFFF;
  font-size: 4vw;
}
.aco-6{
  height: 6vw;
}
.aco-6-1{
  width: 5vw;
}
.aco-5{
  background: #212145;
  width: 100%;
  scale: 0.9;
  padding-top: 2vw;
  border-radius: 5vw;
}
.aco{
  margin-top: 5vw;
}
.aco-1{
  background: #212145;
  height: auto;
  width: 90%;
  margin: 0 auto;
  border-radius: 3vw;
}
.aco-2{
  padding: 3.5vw 0;
  font-size: 5vw;
  color: #ffffff;
}
.charts{
  margin-top: 5vw;
  width: 100vw;
  height: 540rpx;
  scale: 0.95;
}
</style>